<template>
  <div class="">
    <el-form ref="form" :model="form" :rules="rules" style="padding: 10px 10px 0;">
      <el-row>
        <el-col :span="12">
          <el-form-item label="名称" prop="name">
            <el-input v-model.trim="form.name" class="h-40 w-200"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="tx-r">
          <el-form-item v-if="dataSelect">
            <el-button type="primary" @click="getData('form')" :loading="isLoading">关闭并应用</el-button>
          </el-form-item>
          <el-form-item v-else>
            <el-button type="primary" @click="edit('form')" :loading="isLoading">保存</el-button>
            <el-button @click="goback()">返回</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <HotTable ref="hotTable" :root="root" :settings="hotSettings" style="width: 100%;">></HotTable>
  </div>
</template>
<script>
import HotTable from 'vue-handsontable-official'
import Vue from 'vue'
import http from 'assets/js/http'
import fomrMixin from 'assets/js/form_com'
import trans from 'assets/js/trans'


export default {
  props: {
    dataSelect: {
      default: false
    },
    dataId: {},
    reportId: '',
  },
  data() {
    return {
      isLoading: false,
      loading: false,
      form: {
        id: null,
        name: '',
        content: '',
      },
      root: 'test-hot',
      hotSettings: {
        data: [],
        colHeaders: true,
        minSpareCols: 1,
        minSpareRows: 1,
        rowHeaders: true,
        colHeaders: true,
        contextMenu: true,
        height: 504,
      },
      rules: {
        name: [{
          required: true,
          message: '请输入数据集名称'
        }],
      },
    }
  },
  components: {
    HotTable,
  },
  methods: {
    getPosInfo() {
      if (this.dataSelect) {
        this.form.id = this.dataId
      } else {
        this.form.id = this.$route.params.id
      }
      if (!this.form.id) {
        return
      }
      this.apiGet('admin/datas/' + this.form.id).then((res) => {
        this.handelResponse(res, (data) => {
          window.console && console.log(data);
          this.form.name = data.name
          this.form.content = data.content

          // data.content = [
          //   ['sample', 'data']
          // ]
          let hotData = trans.str2HotData(data.content)
          this.hotSettings.data = hotData
        })
      })
    },
    edit(form) {
      this.$refs.form.validate((pass) => {
        if (pass) {
          // this.isLoading = !this.isLoading

          let content = this.$refs.hotTable.table.getData();
          this.form.content = trans.hotData2Str(content)
          window.console && console.log(this.form.content);

          this.apiPut('admin/datas/', this.form.id, this.form).then((res) => {
            this.handelResponse(res, (data) => {
              _g.toastMsg('success', '编辑成功')
              setTimeout(() => {
                this.goback()
              }, 1500)
            }, () => {
              this.isLoading = !this.isLoading
            })
          })
        }
      })
    },
    getData(form) {
      let that = this
      this.$refs.form.validate((pass) => {
        if (pass) {
          // this.isLoading = !this.isLoading

          let content = this.$refs.hotTable.table.getData();
          this.form.content = trans.hotData2Str(content)
          window.console && console.log(this.form.content);

          // 保存数据集
          this.apiPut('admin/datas/', this.form.id, this.form).then((res) => {
            this.handelResponse(res, (data) => {
              that.$emit('selectData')
            })
          })
        }
      })
    },
  },
  created() {
    this.getPosInfo()
  },
  watch: {
    dataId: function() {
      this.getPosInfo()
    }
  },
  mixins: [http, fomrMixin, trans]
}
</script>
<style lang="less">
#test-hot {
  width: 600px;
  height: 400px;
  overflow: hidden;
}

.ht_master {
  .wtHolder {
    width: 100% !important;
    background: #fff;
  }
}
</style>
